<template>
	<!-- 搜索区域 -->
	       <el-header>{{$store.state.user.username}},欢迎您的登录</el-header>
	<el-row style="margin: 10px 0;">
		<el-col :span="12">
			<div><b>收件箱</b></div>
		</el-col>
		<!-- 搜索区域 -->
		<el-col :span="12">
			<el-input v-model="search" placeholder="请输入关键字" style="width: 50%;" clearable />
			<el-button type="primary" style="margin-left: 10px;">查询</el-button>
		</el-col>
	</el-row>
	
	<el-table :data="subAttend" stripe style="width: 100%" size="large">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="title" label="邮件标题" />
			<el-table-column prop="sender" label="发件人" />
			<el-table-column prop="sendTime" label="送达时间" sortable />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button size="small" type="primary" @click="jump(scope.row.emailId)">查看</el-button>
					<el-popconfirm title="确认要删除吗?" @confirm="saveDelete(scope.row.emailId)">
					    <template #reference>
							<el-button size="small" type="danger">删除</el-button>
						</template>
					</el-popconfirm>		
			 </template>
			</el-table-column>
	</el-table>		
			
	<el-pagination background layout="sizes,prev, pager, next,jumper"
        @size-change="doPaging"
		@current-change="doPaging" :page-sizes="[1,2,5,10]" v-model:currentPage="currentPage"
        v-model:page-size="pagesize"
		:total="emails.length" v-model:total="total"/>

</template>

<script>
	
  import qs from 'qs'
  export default {
    name: "ReceiveMail",
		data(){
			return{
				currentPage4:1,
				search: '',
				emails:[],
				pageSize:5,
				subAttend:[],
				user:{}
			}
		},
		methods:{
			
			async saveDelete(did){
				await this.$axios.get("http://localhost:8080/email_box/delete",{
					params:{
						emailId:did
					}
				}).then(function(res){
					//res.data  true  false
					console.log(did)
				})
				let that=this
				await this.$axios.get("http://localhost:8080/email_box/listed").then(function(res)
				{
					that.emails=res.data
					console.log(res)
				})
			},
			jump(dided)
			{
				this.$axios.get("http://localhost:8080/email_box/check_mail",{
					params:{
						emailId:dided
					}
				}).then(function(res){
					//res.data  true  false
					console.log(dided)
				})
				this.$router.push('/email/checkmail')
			},
			doPaging(curr){
                console.log(curr)
                console.log(this.subAttend)
                this.subAttend=this.emails.slice((curr-1)*this.pageSize,curr*this.pageSize)
           },
//         filterTableData(){
//         		console.log(this.emails)
//              this.filterTableData=this.emails.filter(
//                  (data) => {
//                      return data.attendState.includes(this.search.toLowerCase())||data.attendType.includes(this.search.toLowerCase())
//                  }
//              )
//              this.doPaging(1)
//         }
		},
		created(){
			let that=this
			this.$axios.get("http://localhost:8080/email_box/listed").then(function(res)
			{
				that.emails=res.data
				
				that.subAttend=res.data.slice(0,that.pageSize)
//				that.subAttend=that.subAttend.filter((data)=>{
//					return data.receiverAddress==that.$store.state.user.username
//				})
				console.log(res)
				console.log(that.user)
			})
		},
		computed:{
			user(){
				return this.$store.state.user
			}
		}
  }
</script>

<style scoped>

</style>